<template>
    <div>
        <el-page-header @back="goBack" content="新增跟踪类项目" style="padding: 8px 0 24px 0;">
        </el-page-header>
        <el-row :gutter="15">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
                <el-col :span="24">
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入项目名称" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="跟踪人" prop="followName">
                        <el-input v-model="formData.followName" placeholder="请输入跟踪人" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="跟踪人联系方式" prop="followPhone">
                        <el-input v-model="formData.followPhone" placeholder="请输入跟踪人联系方式" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目类型" prop="proType">
                        <el-select v-model="formData.proType" placeholder="请选择项目类型" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                            <el-option v-for="dict in dict.type.project_type" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目状态" prop="state">
                        <el-select v-model="formData.state" placeholder="请选择项目状态" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <el-option v-for="dict in dict.type.project_state" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开始时间" prop="startFollowTime">
                        <el-date-picker v-model="formData.startFollowTime" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss" :disabled="viewType == 'read'" :style="{ width: '100%' }"
                            placeholder="请选择项目开始时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目说明" prop="proShow">
                        <el-input v-model="formData.proShow" type="textarea" placeholder="请输入项目说明" maxlength="500"
                            :disabled="viewType == 'read'" :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预计规模" prop="scale">
                        <el-input v-model="formData.scale" placeholder="请输入预计规模" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <template slot="append">万</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否投标" prop="isBid">
                        <el-select v-model="formData.isBid" placeholder="请选择是否投标" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <el-option v-for="dict in dict.type.tender_state" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="投标时间" prop="bidTime">
                        <el-date-picker v-model="formData.bidTime" format="yyyy-MM-dd" :disabled="viewType == 'read'"
                            value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: '100%' }" placeholder="请选择投标时间"
                            clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="info-title"><el-divider>项目方信息</el-divider></el-col>
                <el-col :span="12">
                    <el-form-item label="对方单位名称" prop="partyDeptName">
                        <el-input v-model="formData.partyDeptName" placeholder="请输入对方单位名称" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单位地址" prop="partyDeptAddress">
                        <el-input v-model="formData.partyDeptAddress" placeholder="请输入单位地址" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <div v-for="(item, index) in formData.proLinkList" :key="index">
                    <el-col :span="7">
                        <el-form-item label="联系人" :prop="'proLinkList.' + index + '.name'"
                            :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]">
                            <el-input v-model="item.name" placeholder="请输入联系人" clearable :style="{ width: '100%' }"
                                :disabled="viewType == 'read'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="联系方式" :prop="'proLinkList.' + index + '.phone'"
                            :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]">
                            <el-input v-model="item.phone" placeholder="请输入联系方式" clearable :style="{ width: '100%' }"
                                :disabled="viewType == 'read'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="职务" :prop="'proLinkList.' + index + '.job'"
                            :rules="[{ required: true, message: '请输入职务', trigger: 'blur' }]">
                            <el-input v-model="item.job" placeholder="请输入职务" clearable :style="{ width: '100%' }"
                                :disabled="viewType == 'read'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label-width="20">
                            <el-button size="mini" icon="el-icon-minus" circle @click="remove(index)"
                                v-if="index != 0"></el-button>
                            <el-button v-if="index == formData.proLinkList.length - 1" size="mini" icon="el-icon-plus"
                                circle @click="handleAdd"></el-button>
                        </el-form-item>
                    </el-col>
                </div>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" maxlength="500"
                            :disabled="viewType == 'read'" :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="附件" prop="annex">
                        <fileUpload @input="getFileList" :value="formData.annex" :disabled="viewType == 'read'" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">返回</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </div>
</template>
<script>
import { addTrailProject, updateTrailProject } from "@/api/project/index";
import { getToken } from "@/utils/auth";

export default {
    components: {},
    dicts: ['project_type', 'project_state', 'tender_state'],
    props: {
        viewType: {
            type: String,
            default: ''
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            httpurl: process.env.VUE_APP_BASE_API,
            formData: {
                proLinkList: [
                    { name: "", phone: "", job: "" }
                ],
                name: undefined,
                startFollowTime: null,
                followName: undefined,
                followPhone: undefined,
                proType: undefined,
                state: undefined,
                proShow: undefined,
                scale: undefined,
                isBid: undefined,
                bidTime: null,
                partyDeptName: undefined,
                partyDeptAddress: undefined,
                remark: undefined,
                annex: undefined,
            },
            rules: {
                startFollowTime: [{
                    required: true,
                    message: '请选择项目开始时间',
                    trigger: 'change'
                }],
                name: [{
                    required: true,
                    message: '请输入项目名称',
                    trigger: 'blur'
                }],
                followName: [{
                    required: true,
                    message: '请输入跟踪人',
                    trigger: 'blur'
                }],
                followPhone: [{
                    required: true,
                    message: '请输入跟踪人联系方式',
                    trigger: 'blur'
                }, {
                    pattern: /^1[3456789]\d{9}$/,
                    message: "请输入正确的手机号",
                    trigger: "blur",
                }],
                proType: [{
                    required: true,
                    message: '请选择项目类型',
                    trigger: 'change'
                }],
                state: [{
                    required: true,
                    message: '请选择项目状态',
                    trigger: 'change'
                }],
                proShow: [{
                    required: true,
                    message: '请输入项目说明',
                    trigger: 'blur'
                }],
                scale: [{
                    required: true,
                    message: '请输入预计规模',
                    trigger: 'blur'
                }],
                isBid: [{
                    required: true,
                    message: '请选择是否投标',
                    trigger: 'blur'
                }],
                bidTime: [{
                    required: false,
                    message: '请选择投标时间',
                    trigger: 'change'
                }],
                partyDeptName: [{
                    required: true,
                    message: '请输入对方单位名称',
                    trigger: 'blur'
                }],
                partyDeptAddress: [{
                    required: true,
                    message: '请输入单位地址',
                    trigger: 'blur'
                }],
                remark: [],
            },
            field119Action: '/customUploadApplet/my/upload',
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            field119fileList: []
        }
    },
    computed: {},
    watch: {
        form: {
            handler(val) {
                this.formData = val;
            },
            deep: true
        }
    },
    created() { },
    mounted() { },
    methods: {
        handleAdd() {
            this.formData.proLinkList.push({ name: "", phone: "", job: "" });
        },
        remove(index) {
            if (this.formData.proLinkList.length >= 1) {
                this.formData.proLinkList.splice(index, 1);
            } else {
                this.formData.proLinkList[0] = { name: "", phone: "", job: "" };
            }
        },
        getFileList(file) {
            this.formData.annex = file;
        },
        goBack() {
            this.$router.go(-1);
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (valid) {
                    if (this.formData.id != undefined) {
                        updateTrailProject({ ...this.formData }).then(response => {
                            if(response.code == 200) {
                                this.$modal.msgSuccess("修改成功");
                                this.$router.push({
                                    path: '/project/projectList'
                                });
                            }
                        });
                    } else {
                        addTrailProject({ ...this.formData }).then(response => {
                            if(response.code == 200) {
                                this.$modal.msgSuccess("新增成功");
                                this.$router.push({
                                    path: '/project/projectList'
                                });
                            }
                        });
                    }
                }
            })
        },
        resetForm() {
            this.$router.push({
                path: '/project/projectList'
            })
        },
        field119BeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB')
            }
            return isRightSize
        },
    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-upload__tip {
    line-height: 1.2;
}

.info-title {
    text-align: center;
    padding: 10px 0;
}
</style>